<template>
  <n-switch v-model:value="isDark" :on-update:value="toggleDark">
    <template #checked-icon>
      <n-icon :component="MoonOutline" />
    </template>
    <template #unchecked-icon>
      <n-icon :component="SunnyOutline" />
    </template>
  </n-switch>
</template>

<script lang="ts" setup>
import { SunnyOutline, MoonOutline } from "@vicons/ionicons5";
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<style lang="scss" scoped></style>
